<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-20 11:22:25
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page canback hasbtn title="个人信息">
    <b-button :param="handlerParam" @handler="handler"></b-button>
    <view class="form">
      <view class="inner">
        <view class="single" v-for="v in option" :key="v.id">
          <view class="label">{{ v.label }}</view>
          <view class="content">
            <input v-if="v.type == 'input'" :type="v.key == 'username' ? 'nickname' : ''" class="input"
              :placeholder="v.placeholder" placeholder-class="formPlaceholader" v-model="form[v.key]">
            <button v-if="v.type == 'button'" class="avatar-wrapper" style="border:0;" open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar">
              <image class="avatar" :src="userinfo.headimg"></image>
            </button>
            <image v-if="v.key == 'headimg'" class="arrow" mode="aspectFill"
              src="../../static/img/icon/arrow-right-h.png"></image>
          </view>
        </view>
      </view>
      <view class="code">
        <view class="single">
          <view class="label">ID号</view>
          <view class="content">12345678</view>
        </view>
      </view>
    </view>
  </l-page>
</template>

<script>
import bButton from "@/components/button/button";
export default {
  name: "personal",
  components: { bButton },
  data() {
    return {
      userinfo: {
        headimg: ''
      },
      handlerParam: {
        type: "single",
        position: "fixed",
        list: [
          {
            title: "保存",
            bgcolor: "#6ABE83",
            color: "#ffffff",
          },
        ],
      },
      option: [{ id: 0, label: '用户头像', placeholder: '用户头像', key: 'headimg', type: 'button' },
      { id: 1, label: '昵称', placeholder: '请输入昵称', key: 'username', type: 'input' },
      { id: 2, label: '性别', placeholder: '请输入性别', key: 'gender', type: 'input' },
      { id: 3, label: '年龄', placeholder: '请输入年龄', key: 'age', type: 'input' },
      { id: 4, label: '手机号码', placeholder: '请输入手机号码', key: 'mobile', type: 'input' }],
      form: {
        headimg: '',
        username: '',
        gender: '',
        age: '',
        mobile: ''
      },
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    onChooseAvatar(e) {
      this.userinfo.headimg = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(e.detail.avatarUrl, 'base64');
    },
    handler() {
      const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (!reg.test(this.form.mobile) && this.form.mobile.length > 0) {
        this.$util.tip({ title: '请输入正确的手机号' });
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确定保存?",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: "修改中", mask: true });
            // editinfo({ nickname: this.userinfo.username, headimg: this.userinfo.headimg }).then((res) => {
            //   if (res.data.code == 200) {
            //     uni.hideLoading();
            //     this.$util.tip({ title: '修改成功' });
            //     uni.setStorageSync("userInfo", this.userinfo);
            //     setTimeout(() => {
            //       this.$util.linkTo('/pages/tabbar/mine', 'switch');
            //     }, 1500);
            //   }
            // });
          }
        },
      });
    }
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
.form {
  padding: 20upx;

  .arrow {
    width: 24upx;
    height: 24upx;
  }

  >view {
    padding: 0 28upx 0 38upx;
    width: 100%;
    background: #FFFFFF;
    border-radius: 16upx;

    .single {
      .flex();
      height: 100upx;

      &:not(:last-child) {
        border-bottom: 2upx solid #F5F5F5;
      }

      .label {
        width: 120upx;
        font-size: 24upx;
        font-weight: bold;
        color: #333333;
        line-height: 36upx;
      }

      .content {
        .flex(row, flex-end);
        width: calc(100% - 120upx);
        font-size: 24upx;
        color: #333333;
        line-height: 36upx;

        .avatar-wrapper {
          margin-right: 14upx;
          width: 60upx;
          height: 60upx;
          border-radius: 8upx;
        }

        input {
          width: 100%;
          text-align: right;
        }
      }
    }
  }

  .inner {
    margin-bottom: 14upx;
  }
}
</style>